<template>
  <div class="helper">
    <div class="main-body">
      <span style="display: block;width: 8%;height: 40px;line-height: 40px;background-color: rgba(240,128,128,0);font-size: 18px;
      text-align: left;margin-left: 4%;margin-top: 1.8%;color: black;font-weight: 600;">产品帮助</span>
      <span style="display: block;height: .8px;width: 96%;background-color: #F2F2F2;margin: 0 auto"></span>
      <div style="width: 88%;height: 68%;background-color: rgba(240,128,128,0);margin: 0 auto;position: relative;">
        <div class="pipeline"></div>
        <span class="s1">上传心音信号音频文件</span>
        <span class="s2">智能算法一键检测</span>
        <div class="s3">
          <span style="display: block;height: 50%;width: 100%;line-height: 40px">生成报告</span>
          <span style="display: block;height: 50%;width: 100%;line-height: 40px">全方位可视化分析检测样本</span>
        </div>
      </div>
      <span class="begin" @click="goDetec">开始检测</span>
    </div>
  </div>

</template>

<script>
export default {
  name: "Helper",
  data() {
    return {
      active: 0,
      helper_step_status: ["process", "wait", "wait"],
    }
  },
  methods: {
    goDetec() {
      this.$router.push('/index/detection/upload')
    }
  },
  mounted() {
    console.log("helper ",this.active);
    console.log("helper ",this.helper_step_status);
  }
}
</script>

<style scoped>
  .main-body {
    overflow: hidden;
    width: 98%;
    height: 600px;
    background-color: white;
    box-shadow: 0 0 10px rgb(82 63 105 / 8%);
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 8px;
  }
  .begin {
    position: relative;
    display: block;
    z-index: 2;
    width: 100px;
    height: 48px;
    line-height: 48px;
    background-color: #1362FC;
    margin: 0 auto;
    margin-top: 3%;
    color: white;
    border-radius: 16px;
    font-size: 14px;
    letter-spacing: 1px;
    transition: .3s;
  }
  .begin:hover {
    background-color: #034BD9;
    box-shadow: 0 0 10px rgb(82 63 105 / 8%);
  }
  .pipeline {
    margin: 0 auto;
    margin-top: 20px;
    width: 98%;
    height: 78%;
    /*background-color: rgba(183, 30, 81, 0.56);*/
    background-image: url("../assets/pipeline.png");
    background-size: cover;
  }
  .s1, .s2, .s3 {
    display: inline-block;
    /*background-color: lavender;*/
    height: 22%;
    line-height: 80px;
    overflow: hidden;
    font-size: 20px;
    color: #505050;
    font-weight: 500;
  }
  .s1 {
    margin-left: 4%;
    margin-right: 12%;
  }
  .s2 {
    margin-left: 4%;
  }
  .s3 {
    margin-left: 13%;
    margin-right: 0;
  }
</style>